<template>
    <HeadImage :background="backPath">
        {{ disposition[0] }}
        <p slot="two" class="head"> {{ disposition[1] }}</p>
    </HeadImage>
    <div>
        <div>{{ dizhi }}</div>
        <a href="http://whois.pconline.com.cn/?ip=113.13.178.166"></a>
        <h2 :class="{'global_font':$store.state.nowTime==='moon'}">日志更新</h2>
        <ul class="list">
            <li v-for="(item,index) in hotContent">
                <span class="sign"
                      :style="{'background': index===0 ? 'linear-gradient(to left,#fa709a, #fee140)':'' }">{{ index === 0 ? '最新' : '往期' }}</span>
                <OnlookerContent
                        :content="item"
                        :index="index"
                        @click="detail(item)"
                        :class="{'global_css':$store.state.nowTime==='moon'}"
       ></OnlookerContent>
            </li>
        </ul>
        <div class="footer">
            <button @click="nextLimit">{{ hotContent.length % 7 === 0 ? '查看更多' : '没有更多了' }}</button>
        </div>
    </div>
    <AnnouncementDetails v-show="shutDown_" :content_="content_" @shutDown="shutDown"></AnnouncementDetails>
</template>

<script>
import HeadImage from "@/components/PublicComponents/HeadImage.vue";
import OnlookerContent from "@/components/changelog/OnlookerContent.vue";
import SiteInformation from "@/components/PublicComponents/SiteInformation.vue";
import api from "@/api";
import AnnouncementDetails from "@/components/changelog/AnnouncementDetails.vue";

export default {
    name: "changelog",
    components: {AnnouncementDetails, SiteInformation, HeadImage, OnlookerContent},
    data() {
        return {
            backPath: "/img/common/t01d1a844d08ac8f105.jpg",
            hotContent: "",
            index: 1,
            nextLimit: "",
            site_info: "",
            disposition: "",
            content_: "",
            shutDown_: false,
            dizhi: "",
            ts:'',
        }
    },
    mounted() {

        let writing = JSON.parse(window.localStorage.getItem("DataContent"));
        setTimeout(() => {
            if (writing) {
                this.disposition = writing[7].content.split("|||||");
                this.backPath = writing[8].content;
            }
        }, 100)


        this.nextLimit = this.next;
        this.ts = window.localStorage.getItem("nowTime")
        if (this.ts !== "") {
            this.$store.commit("nowTimeStatue", this.ts);
        }
        api.getAnnouncement(this.index).then((res) => {
            this.hotContent = res.data.data
        })
    },
    methods: {
        shutDown() {
            this.shutDown_ = false;
        },
        detail(item) {
            if (!this.shutDown_) {
                this.content_ = item;
            }
            this.shutDown_ = true;
        },
        next() {
            this.index += 1;
            api.getAnnouncement(this.index).then((res) => {
                this.hotContent = this.hotContent.concat(res.data.data);
                if (this.hotContent % 7 !== 0)
                    this.nextLimit = ""
            })
        }
    }
}
</script>

<style scoped>
.head {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem
}

.head img {
    margin-left: 5px;
    width: 25px
}

h2 {
    width: 100%;
    padding: 10px 0;
    text-align: center;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.3);
    color: #8f8c8c;
}

.list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer {
    text-align: center;
    padding: 10px 20px;
    padding-bottom: 50px;
}

.footer button {
    padding: 10px 20px;
    background: white;
    border: 0;
    border-radius: 10px;
    color: #5d5757;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.footer button:hover {
    cursor: pointer;
    color: #6095da;
}

ul {
    position: relative;
    list-style: none;
}

.siteInformation ul li {
    padding: 5px;
    color: #f6f2f2;
}

.sign {
    position: absolute;
    top: 5px;
    left: 5px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 20px;
    font-size: 13px;
    z-index: 1;
    animation: box .3s ease-in-out 0s 1 forwards;
    background: linear-gradient(to left,#a18cd1, #fbc2de);
}

@keyframes box {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
</style>